<template>
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-header">
        <i class="fa fa-exchange"></i> 转账汇款
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-body">
            <form class="layui-form" action>
              <div class="layui-form-item">
                <label class="layui-form-label my_label">汇款方账户</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    v-model="sendAccount"
                    maxlength="18"
                    lay-verify="title"
                    autocomplete="off"
                    placeholder="请输入汇款方卡号"
                    class="layui-input my_input"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  >
                  <span class="my_span" ref="sendAccountRef">* 账户需18位</span>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label my_label">汇款方</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    v-model="sendAccountName"
                    lay-verify="title"
                    autocomplete="off"
                    placeholder="请输入汇款方账户名"
                    class="layui-input my_input"
                  >
                  <span class="my_span" ref="sendAccountNameRef">* 汇款方账户名不能为空</span>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label my_label">交易密码</label>
                <div class="layui-input-block">
                  <input
                    type="password"
                    v-model="password"
                    maxlength="6"
                    lay-verify="title"
                    autocomplete="off"
                    placeholder="请输入交易密码"
                    class="layui-input my_input"
                  >
                  <span class="my_span" ref="passwordRef">* 密码需6位</span>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label my_label">收款方账户</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    v-model="recevieAccount"
                    maxlength="18"
                    lay-verify="title"
                    autocomplete="off"
                    placeholder="请输入收款方卡号"
                    class="layui-input my_input"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  >
                  <span class="my_span" ref="recevieAccountRef">* 账户需18位</span>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label my_label">收款方</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    v-model="recevieAccountName"
                    lay-verify="title"
                    autocomplete="off"
                    placeholder="请输入收款方账户名"
                    class="layui-input my_input"
                  >
                  <span class="my_span" ref="recevieAccountNameRef">* 收款方账户名不能为空</span>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label my_label">汇款金额</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    v-model="tranBalance"
                    lay-verify="title"
                    autocomplete="off"
                    placeholder="请输入汇款金额"
                    class="layui-input my_input"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  >
                  <span class="my_span" ref="tranBalanceRef">* 汇款金额不能小于等于零</span>
                </div>
              </div>
              <button
                class="btn btn-primary"
                @click.prevent="tranferBalance"
                data-dismiss="modal"
                style="width:100%;"
              >汇款</button>
            </form>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <img
            src="/loginImg/tranfer.jpg"
            alt
            class="tranferimg"
            style="    width: 94%;margin-left: 3%;"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  data() {
    return {
      sendAccount: "", //汇款方账户
      sendAccountName: "", //汇款方姓名
      password: "", //汇款方密码
      recevieAccount: "", //收款方账户
      recevieAccountName: "", //收款方姓名
      tranBalance: "" //交易金额
    };
  },
  methods: {
    tranferBalance: function() {
      //转账汇款
      var sendAccountRegix = /^[\d]{18}$/;
      var recevieAccountRegix = /^[\d]{18}$/;
      var passwordRegix = /^[\d]{6}$/;
      this.$refs.sendAccountRef.className = "my_span";
      this.$refs.recevieAccountRef.className = "my_span";
      this.$refs.passwordRef.className = "my_span";
      this.$refs.sendAccountNameRef.className = "my_span";
      this.$refs.recevieAccountNameRef.className = "my_span";
      if (!this.sendAccount.match(sendAccountRegix)) {
        this.$refs.sendAccountRef.className = "my_show_span";
      } else if (!this.recevieAccount.match(recevieAccountRegix)) {
        this.$refs.recevieAccountRef.className = "my_show_span";
      } else if (!this.password.match(passwordRegix)) {
        this.$refs.passwordRef.className = "my_show_span";
      } else if (this.tranBalance <= 0) {
        this.$refs.tranBalanceRef.className = "my_show_span";
      } else if (
        this.sendAccountName.trim() == "" ||
        this.sendAccountName.trim() == null
      ) {
        this.$refs.sendAccountNameRef.className = "my_show_span";
      } else if (
        this.recevieAccountName.trim() == "" ||
        this.recevieAccountName.trim() == null
      ) {
        this.$refs.recevieAccountNameRef.className = "my_show_span";
      } else {
        var data = Qs.stringify({
          sendAccount: this.sendAccount,
          sendAccountName: this.sendAccountName,
          password: this.password,
          recevieAccount: this.recevieAccount,
          recevieAccountName: this.recevieAccountName,
          tranBalance: this.tranBalance
        });
        this.$axios
          .post("/bk-user/transferBalance", data, {
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
          })
          .then(result => {
            if (result.data.code === 200) {
              $("form")
                .find("input")
                .each(function() {
                  //清空表单
                  $(this).val("");
                });
              this.$message.error(result.data.message);
            } else if (result.data.code === 400) {
              this.$message.error(result.data.message);
            }
          })
          .catch(failResponse => {});
      }
    }
  }
};
</script>
<style>
.my_label {
  width: 110px;
}
.my_input {
  width: 60%;
  position: absolute;
}
.my_span {
  /* color:red;
        float: right;
        position: relative;
        top: 6px; */
  display: none;
}
.my_show_span {
  display: inline-block;
  color: red;
  float: right;
  position: relative;
  top: 6px;
}
</style>
